<template>
    <div class="goodclassedit">
        <el-dialog
                :title="title"
                :visible.sync="dialogFormVisible"
                width="800px"
                :close-on-click-modal="false"
                @close="close"
        >
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="排序">
                    <el-input v-model="form.sort" type="number" placeholder="请输入排序"></el-input>
                </el-form-item>
                <el-form-item label="广告标题" prop="name" :required="true">
                    <el-input v-model="form.name" placeholder="请输入广告标题"></el-input>
                </el-form-item>
                <el-form-item label="图片" prop="icon" :required="true">
                    <div class="uploadSource bor_de rel flex" v-if="form.icon">
                        <label class="statusLabel curs"  @mouseenter="enter(1)" @mouseleave="leave(1)">
                            <i class="el-icon-check" ref="imgicon1"></i>
                            <i class="el-icon-close" @click="deleteMultiImage(form.icon,1)"></i>
                        </label>
                        <img :src="form.icon" @click='test(1)' class="wid"/>
                    </div>
                    <div class="uploadSource flex-center curs" v-else @click='test(1)'>
                        <i class="el-icon-plus fon_40 color_d9"></i>
                    </div>
                    <attachment-img ref="img1" type="img" @attachment='imgadd1'></attachment-img>
                </el-form-item>
                <el-form-item label="显示状态">
                    <el-tooltip :content="form.display==1?'显示':'隐藏'" placement="top">
                        <el-switch v-model="form.display" active-value="1" inactive-value="2"></el-switch>
                    </el-tooltip>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="close">取 消</el-button>
                <el-button size="medium" type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import attachmentImg from "@/plugins/attachment-img";
    import {postSaveAd,getSaveAd} from "@/api/public";
    export default {
        name: "goodlistedit",
        components: { attachmentImg,},
        created() {
        },
        data() {
            return {
                form: {
                    id:'',
                    sort: '1',
                    name: '',
                    icon: '',
                    display: '1',
                },
                title: "",
                dialogFormVisible: false,
            }
        },
        methods: {
            showEdit(row) {
                if (!row) {
                    this.title = "添加广告";
                } else {
                    this.title = "编辑公告";
                    this.form = Object.assign({}, row);
                }
                this.dialogFormVisible = true;
            },
            enter(i=0){
                this.$refs['imgicon' + i].style.display = 'none'
            },
            leave(i=0){
                this.$refs['imgicon' + i].style.display = 'inline-block'
            },
            test(i = 0) {
                console.log(this.$refs, i)
                this.$refs['img' + i].dialogVisible = true
            },
            imgadd1(url) {
                this.form.icon = url.str
            },
            deleteMultiImage(item, index, type) {
                //typem没传是单图multigraph多图；index上传图片组件排序
                Array.prototype.remove = function (val) {
                    var index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };
                if (!type) {
                    switch (index) {
                        case 1:
                            this.form.icon = '';
                            break
                    }
                }
            },
            close() {
                this.$refs["form"].resetFields();
                this.form = this.$options.data().form;
                this.dialogFormVisible = false;
            },
            save() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        // console.log(this.form)
                        this.form.location = 1
                        const { msg } = await postSaveAd(this.form);
                        this.$baseMessage(msg, "success");
                        this.$emit("fetchData");
                        this.close();
                    } else {
                        return false;
                    }
                });
            },
        }
    };
</script>
